<template>
	<view>
		<image :src="picUrl"></image>
		<button type="primary" :loading="loading" @click="changeLoading()">点击切换</button>
	</view>
	
	<view class="box" :class="{active:isActive}" @click="changeClass" :style="{width: '300px', height: 260 + 'px','font-size': fontSize+'px'}">v-bind指令</view>
</template>

<script setup>
	import {ref} from 'vue'
	let arrs = ref(['/static/pic1.png', '/static/pic2.png', '/static/pic3.webp', '/static/pic4.jpg'])
	let picUrl = ref(arrs.value[0])
	let index = 1
	let fontSize = ref(0)
	setInterval(()=>{
		picUrl.value = arrs.value[index++ % arrs.value.length]
		fontSize.value++
	},2000)
	let loading = ref(true)
	function changeLoading(){
		loading.value = !loading.value
	}
	let isActive = ref(true)
	function changeClass(){
		isActive.value = !isActive.value
	}
</script>

<style lang="scss">
	  .box{
		  width: 200px;
		  height: 200px;
		  background: greenyellow;
		  font-size: 20px;
	  }
	  .active{
		  background: orange;
		  color: #fff
	  }
</style>